<template>
  <page-view class="flex flex-col">
    <van-search
      v-model="queryParams.movie_name"
      shape="round"
      show-action
      background="#F7504D"
      placeholder="请输入电影名称或类型">
      <template #left>
        <img src="../assets/img/left-arrow.svg" class="mr-[10px]" @click="$router.back()" />
      </template>
      <template #action>
        <div class="text-[14px] text-white" @click="queryData">搜索</div>
      </template>
    </van-search>
    <div class="content-box flex-1 overflow-auto">
      <van-list :finished="queryParams.pageIndex>=searchResult.pageCount"
        loading-text="正在加载数据"
        :offset="10"
        v-model:loading="isLoading"
        @load="loadNextPage" v-if="searchResult.listData.length>0">
        <div class="grid-box">
          <div class="movie-item  box-border p-[5px]"
            v-for="item in searchResult.listData" :key="item.id"
            @click="$router.push({name:'movieDetail',query:{id:item.id}})">
            <div class="img-box h-[140px] relative">
              <img :src="baseURL+item.movie_pc" class="w-full h-full object-cover" alt="">
              <p class="absolute left-[5px] bottom-[5px] text-warningColor font-bold text-[12px]">评分：{{item.movie_score}}分</p>
            </div>
            <p class=" text-gray-900 text-[12px] truncate py-[2px] font-bold">{{item.movie_name}}</p>
          </div>
        </div>
      </van-list>
      <van-empty description="暂无数据" v-if="searchResult.listData.length==0"></van-empty>
    </div>
  </page-view>
</template>
<script setup>
import titleBar from "../components/title-bar.vue";
import { ref, reactive, inject } from "vue";
import API from "../utils/API";
import loadingBox from "../components/loading-box.vue";

const baseURL = inject("baseURL");
const queryParams = reactive({
  pageIndex: 1,
  keyword: "",
});

const searchResult = reactive({
  listData: [],
  pageCount: 0,
});

const isLoading = ref(false);
const queryData = () => {
  queryParams.pageIndex = 1;
  isLoading.value = true;
  API.movieInfo
    .search(queryParams)
    .then((result) => {
      searchResult.listData = result.data.listData;
      searchResult.pageCount = result.data.pageCount;
    })
    .finally(() => {
      isLoading.value = false;
    });
};

const loadNextPage = () => {
  queryParams.pageIndex++;
  isLoading.value = true;
  API.movieInfo
    .search(queryParams)
    .then((result) => {
      searchResult.listData = searchResult.listData.concat(
        result.data.listData
      );
      searchResult.pageCount = result.data.pageCount;
    })
    .finally(() => {
      isLoading.value = false;
    });
};
</script>
<script>
export default {
  name: "search",
};
</script>
<style scoped lang="scss">
:deep(.van-search__action:active) {
  background-color: transparent;
}
.grid-box {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, calc(33.3% - 4px));
  grid-gap: 2px 2px;
  @apply bg-gray-100;
  justify-content: center;
  .movie-item {
    @apply bg-white;
  }
}
</style>